import { Component } from "react"
class TestState extends Component {
  /**
   * 
   * + 状态`state`，即数据，是组件内部的**私有数据**，只能在组件内部使用
     + 状态 state 的值是**对象**，表示一个组件中可以有多个数据
     + 通过 `this.state.xxx` 来获取状态
   * 类比于vue2中的data
   */
  state = {
    count: 0,
    list: [1, 2, 3],
    isLoading: true
  }
  /**
 * vue修改数据：this.变量名=新值
 * react这样做不会触发视图的变化
 * vue修改数据思想 数据可变
 * this.arr.push()
 * react修改数据思想，数据不可变 新值覆盖老值
 * react使用方法this.setState({
 * 变量名:最新修改的值
 * 类似于小程序
 * })
 * let newObj={...this.state.obj,age:20}
 * this.setState({obj:newObj})
 * let newList = [...this.state.List,新增加的值]
 */
  add = () => {

    this.setState({
      count: this.state.count + 1
    })
  }
  push = () => {
    let newList = [...this.state.list, this.state.count]
    // push返回的是新数组的长度
    this.setState({
      list: newList
    })
  }
  render () {
    return (
      <div>
        <p>计数器:{this.state.count}</p>
        {this.state.list.map((item, index, array) => { return <li key={index}>{item}</li> })}
        <button onClick={this.add}>add</button>
        <button onClick={this.push}>push</button>
      </div>
    )
  }
}
export default TestState